<template>
  <div class="container">
    <a-list itemLayout="vertical" size="large" :dataSource="listData">
      <div slot="header">持之以恒，历久弥新</div>
      <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
        <a-row type="flex" align="middle">
          <a-col :span="16">
            <a-progress
              :percent="item.percent"
              class="progress"
              :status="item.percent < 20 ? 'normal' : item.percent < 40 ? 'exception' : item.percent < 60 ? 'active' : 'success'"
            />
          </a-col>
          <a-col :span="2">
            <a-popconfirm
              title="你要删除这个计划吗？"
              @confirm="confirm(item.id,index)"
              okText="是"
              cancelText="否"
            >
              <a-button type="primary" icon="close"/>
            </a-popconfirm>
          </a-col>
          <a-col :span="6">
            <div class="operation">
              <div class="title">
                <span class="label">计划名称：</span>
                <a-tag color="pink">{{item.name}}</a-tag>
              </div>
              <div class="title">
                <span class="label">总目标：</span>
                <a-tag color="pink">{{item.totalText}}</a-tag>
              </div>
              <div class="title">
                <span class="label">进度：</span>
                <a-tag color="pink">{{item.progress}}</a-tag>
              </div>
              <a-button type="primary" class="add" @click="onAdd(item,index)">
                <a-icon type="plus"/>增长进度
              </a-button>
            </div>
          </a-col>
        </a-row>
        <div class="show"></div>
      </a-list-item>
    </a-list>

    <a-modal
      title="Title"
      :visible="visible"
      cancelText="取消"
      okText="确认"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
    >
      <p>计划名称：{{selectPlan.name}}</p>
      <p>总目标：{{selectPlan.totalText}}</p>
      <p>进度：{{selectPlan.progress}}</p>
      <a-form-item label="新增进度" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input-number :min="1" :max="10" v-model="addValue"/>
      </a-form-item>
    </a-modal>
  </div>
</template>

<script lang="ts">
import axios from "axios";
import {
  Component,
  Emit,
  Model,
  Prop,
  Vue,
  Watch
} from "vue-property-decorator";

@Component
export default class StudyPlanList extends Vue {
  private listData: Array<any> = [];
  labelCol: object = {
    span: 4
  };
  wrapperCol: object = {
    span: 10
  };
  addValue: number = 1;
  private selectPlan: object = {
    progress:0
  };
  private currentIndex: number = 0;
  private visible: boolean = false;
  private confirmLoading: boolean = false;
  private pagination: object = {
    onChange: (page: number) => {
      console.log(page);
    },
    pageSize: 3
  };

  private onAdd(value:object, index:number) {
    this.selectPlan = value;
    this.currentIndex = index;
    this.visible = true;
  }
  private handleOk(e: any) {
    this.confirmLoading = true;
    let newValue = this.addValue + (this.selectPlan as any).progress;
    if (newValue > this.listData[this.currentIndex].total) {
      newValue = this.listData[this.currentIndex].total;
    }



    axios
      .put(`http://www.guotingyan.cn/api/study/${(this.selectPlan as any).id}`, {
        progress: newValue
      })
      .then(response => {
        if (response.status == 200) {
          let list = this.listData;
          //   前端更改变动数据
          list[this.currentIndex].progress = newValue;
          this.listData = list;
          console.log(this.listData);
          list[this.currentIndex].percent = 
            (newValue / parseInt(list[this.currentIndex].total)) * 100
          ;
          this.$message.success("修改进度成功！");
          this.visible = false;
          this.confirmLoading = false;
        }
      })
      .catch(error => {
        this.$message.error(error.toString());
        this.visible = false;
        this.confirmLoading = false;
      });
  }
  private handleCancel(e: any) {
    console.log("Clicked cancel button");
    this.visible = false;
  }
  private confirm(id:number, index:number) {
    axios.delete(`http://www.guotingyan.cn/api/study/${id}`).then(response => {
      if (response.status == 200) {
        const list:Array<any> = this.listData;
        list.splice(index, 1);
        this.listData = list;
        this.$message.success("删除计划成功！");
      }
    });
  }
  mounted() {
    axios.get("http://www.guotingyan.cn/api/study").then(response => {
      if (response.status == 200) {
        const data = response.data.data;
        for (let i = 0; i < data.length; i++) {
          data[i].percent =
            (data[i].progress) / data[i].total * 100
          ;
        }
        this.listData = data;
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.show {
  float: left;
}

.progress {
  line-height: 100%;
}

.operation {
  float: right;
  padding-left: 30px;

  .label {
    display: inline-block;
    width: 6em;
    text-align: right;
  }

  .title {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 15px;
  }

  .add {
    margin-left: 15px;
  }
}
</style>
